<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
    <head>

        <!-- 指定字符集 -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>修改用户</title>

        <link href="css/bootstrap.min.css" rel="stylesheet">
        <script src="js/jquery-2.1.0.min.js"></script>
        <script src="js/bootstrap.min.js"></script>

        <script src="validate/jquery.validator.min.js"></script>
        <script src="validate/local/zh-CN.js"></script>
        <link href="validate/jquery.validator.css" rel="stylesheet">
        
    </head>
    <body>
        <div class="container" style="width: 400px;">
        <h3 style="text-align: center;">修改联系人</h3>

        <form action="${pageContext.request.contextPath}/userServlet?method=update" method="post">
            <%--添加隐藏域id, 作为SQL  语句修改的条件--%>
            <input type="hidden" name="id" value="${user.id}">

          <div class="form-group">
            <label for="name">姓名：</label>
            <input type="text" class="form-control" value="${user.name}" id="name" name="name"  placeholder="请输入姓名" />
              <span id="nSpan"></span>
          </div>

          <div class="form-group">
            <label>性别：</label>
              <input type="radio" name="gender" value="男"  ${user.gender == "男" ? "checked" : ""} />男
                <input type="radio" name="gender" value="女" ${user.gender == "女" ? "checked" : ""}/>女
          </div>

          <div class="form-group">
            <label for="age">年龄：</label>
            <input type="text" class="form-control" id="age" value="${user.age}"  name="age" placeholder="请输入年龄" />
          </div>

          <div class="form-group">
            <label for="address">籍贯：</label>
             <select name="address" class="form-control" >
                <option value="广东" ${user.address == "广东" ?"selected" : ""}>广东</option>
                <option value="广西" ${user.address == "广西" ?"selected" : ""}>广西</option>
                <option value="湖南" ${user.address == "湖南" ?"selected" : ""}>湖南</option>
                <option value="安徽" ${user.address == "安徽" ?"selected" : ""}>安徽</option>
                <option value="东海" ${user.address == "东海" ?"selected" : ""}>东海</option>
                <option value="南岳" ${user.address == "南岳" ?"selected" : ""}>南岳</option>
                <option value="西昆仑" ${user.address == "西昆仑" ?"selected" : ""}>西昆仑</option>
                <option value="北冥" ${user.address == "北冥" ?"selected" : ""}>北冥</option>
            </select>
          </div>

          <div class="form-group">
            <label for="qq">QQ：</label>
            <input type="text" class="form-control" name="qq" value="${user.qq}" placeholder="请输入QQ号码"/>
          </div>

          <div class="form-group">
            <label for="email">Email：</label>
            <input type="text" class="form-control" name="email" value="${user.email}" placeholder="请输入邮箱地址"/>
          </div>

             <div class="form-group" style="text-align: center">
                <input class="btn btn-primary" type="submit" value="提交" />
                <input class="btn btn-default" type="reset" value="重置" />
                <input class="btn btn-default" type="button" value="返回" onclick="javascript:history.go(-1)" />
             </div>
        </form>
        </div>
    </body>
    <script>
        $("#name").blur(function () {
            let name= this.value;
            $.get(
                "userServlet",
                {method:"checkName",name:name},
                function (data) {
                    $("#nSpan").html(data)
                }
            )
        })
    </script>>
</html>